<template>
  <div class="merak-container-has-aside">
    <div v-waterMarker="{ zIndex: 10 }" class="merak-card merak-table-wrapper merak-container-has-search" curPageName="6654444ab">
      <!-- 高级搜索模块 -->
      <searchBarCompoent></searchBarCompoent>

      <!-- 表格组件 -->
      <!-- 这里支持序号，复选框 箭头点击扩展 :column-type="[ 'index','selection', 'expand', { type: 'handle', width: 65, slot: 'handler' }]" -->
      <MerakXTable
        ref="tableRef"
        v-bind="tablePayload"
        :batch-click="handleBatchClick"
        :handler-click="handleHanderClick"
        :query-columns="queryColumns"
        :query-data="queryData"
        style="margin-top: 28px"
      >
        <template #handler="{ row }">
          <div style="display: flex" class="action_wrap">
            <el-button
              link
              type="primary"
               v-auth="{ authArr: authArr, key: 'editGoodsType' }"
             @click="editFormDrawerFn(row)"
            >
              {{ $t("merak.edit") }}
            </el-button>
          </div>
        </template>
      </MerakXTable>
    </div>
    <!-- 添加新商品类型 -->
    <addGoodsTypeFormComponent></addGoodsTypeFormComponent>
    <!-- 添加商品分组 -->
    <addGoodsGroupComponent></addGoodsGroupComponent>

    <batchQueueComponent></batchQueueComponent>
  </div>
</template>
    
<script  setup lang="ts" name="archiveSetGoodsType">
import { ref, reactive, computed, watch, onMounted, nextTick, getCurrentInstance, watchEffect } from "vue";
import { ElButton, ElPopover } from "element-plus";
import useLoading from "@/hooks/useLoading";
import { ResultEnum } from "@/enums/httpEnum";
import selectedParams from "@/components/SearchBar/components/selectedParams.vue";
const { proxy } = getCurrentInstance();

//table 代码
import MerakStatCard, { MerakStatCardInstance, MerakStatDataType } from "@/components/MerakStatCard";
import MerakXTable, { MerakXTableInstance, MerakXTableProps } from "@/components/MerakXTable";
import { Failed } from "@element-plus/icons-vue/dist/types";
// import InfoCard from "./components/InfoCard.vue";

// 页面配置数据
let columnTypeArr = reactive([]);
const state = reactive<{
  filterOptions: Array<any>;
  statValue: string;
  statData: MerakStatDataType[][];
  statParams: Record<string, string>;
  columnType: Array;
}>({
  // 高级搜索方案下拉选项
  filterOptions: [],
  // 统计筛选激活项
  statValue: "",
  // 统计筛选数据
  statData: [],
  // 统计筛选激活后筛选数据
  statParams: {},
  columnType: []
});
const authArr=ref(null);//权限
// 动态计算表格的外部筛选数据
const params = computed(() => ({ ...state.statParams }));
const columnTypeNew = computed(() => state.columnType);
// 表格配置属性
const tablePayload = reactive<MerakXTableProps>({
  // 列设置存储的数据对照值
  columnsByStore: [],
  columnMinWidth: 140,
  // 表格行数据的唯一 key, 跟后端同步
  rowKey: "user_id",
  enabledExport: true, //导出
  // 初始化的外部筛选数据
  params,
  // 展示选中列及操作列, 可通过传入对象形式扩展特殊列的渲染插槽, 例如
  columnType: columnTypeNew,
  // 展示选中列及操作列, 可通过传入对象形式扩展特殊列的渲染插槽, 例如
  // ["multiple", { type: 'handle', width: 200, slot: 'custom_slot_name' | ({ row })=> Component }]
  // columnType: ["multiple", "handle"],
  // 批量操作选项
  batches: [{ type: "delete", text: "批量删除", color: "red" }],
  // 操作列选项
  handles: [{ type: "delete", text: "删除", color: "red" }]
});

// 统计筛选激活触发 table 数据请求
const handleStatChange: MerakStatCardInstance["onChange"] = params => {
  state.statParams = params;
};

/**
 * 表格批量操作事件触发
 * @param type 同 tablePayload.batched 子项的 type
 * @param mode 表格选中的模式  current: 当前页  all: 所有页
 * @param selectedKeys 表格当前页选中模式下选中的行数据 key 的集合, 表格所有页选中模式下未选中的行数据 key 的集合
 */
const handleBatchClick: MerakXTableInstance["batchClick"] = async ({ type, mode, selectedKeys }) => {
  switch (type) {
    case "delete":
      return {
        // 是否刷新表格, 默认 false, 可选参数
        refresh: false,
        // 是否重置表格(分页、排序), 默认 false, 可选参数
        reset: false
      };
    default:
      return;
  }
};
/**
 * 表格操作列事件触发
 * @param type 同 tablePayload.handles 子项的 type
 * @param params 表格操作数据, 可结构关于操作行的数据 { row, rowIndex, rowId }
 */
const handleHanderClick: MerakXTableInstance["handlerClick"] = async ({ type, params }) => {
  switch (type) {
    case "delete":
      alert("delete");
      // 是否刷新表格, 默认 false, 可选参数
      return true;
    case "caht":
      alert("caht");
      // 是否刷新表格, 默认 false, 可选参数
      return true;
    default:
      return;
  }
};

// 获取高级搜索方案
const queryFilterOptions = async data => {
  //   searchbar.value.getPlanList(data.table_id);
  // 初始化接口需要传入队列 loading 暴露的 id
};

// 获取表头数据
const queryColumns: MerakXTableInstance["queryColumns"] = async () => {
  // 初始化接口需要传入队列 loading 暴露的 id
  return getGoodsTypeTableHeadApi().then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      //获取表头后使用tableid 获取搜索方案
      queryFilterOptions(data);
      // 克隆表头数据作为列设置的对照数据
      tablePayload.columnsByStore = JSON.parse(JSON.stringify(data.columns));
      return {
        ...data,
        columns: [...data.columns].map(column => {
          switch (column.field) {
            case "type_id":
              // 设置最小宽度
              column.width = 110;
              // 固定列
              column.fixed = "left";
              // column.slots = { default: "type_id" };
              return column;
            case "type_name":
              // 设置最小宽度
              column.width = 180;
              // 固定列
              column.fixed = "left";
              //  column.slots = { default: "type_name" };
              return column;
            case "type_name_cn":
              // 设置最小宽度
              column.width = 180;
              // 固定列
              column.fixed = "left";
              //   column.slots = { default: "type_name_cn" };
              return column;
            default:
              return column;
          }
        })
      };
    }
  });
};

/**
 * 获取表格数据
 * @param page 分页参数
 * @param sorts 多重排序参数
 * @param filters 表头筛选参数
 * @param from 外部由 tablePayload.params 传入的自定义参数
 */
const queryData: MerakXTableInstance["queryData"] = async ({ page, sorts, from }) => {
  // 创建请求表格数据的参数
  const params: Record<string, any> = {};
  // 如果有分页数据
  if (!!page) {
    Object.assign(params, { ...page });
  }
  // 如果有排序数据
  if (!!sorts) {
    for (let sort of sorts.values()) {
      console.log(sort);
    }
  }
  // 如果有自定义参数
  if (!!from) {
    for (let key of Object.keys(from)) {
      const item = from[key];
      !!item && (params[key] = item);
    }
  }

  // 初始化接口需要传入队列 loading 暴露的 id
  return getGoodsTypeTableDataApi(params).then(({ code, data ,auth_list}) => { 
     
    //  ========权限判断 start  ======
    
    if (auth_list) {
      authArr.value = auth_list;
      if (auth_list?.editGoodsType.show) {
        state.columnType = [{ type: "handle", width: proxy.$t("lang") == "zh" ? 100 : 200, slot: "handler" }];
      }
 
    }
    // ========权限判断 end  ======
    if (code == ResultEnum.SUCCESS) {
      console.log(data);
      //   expirationReminder.value = Number(data.dueContract) || 0;
      return data.table_data;
    }
  });
};

/**
 * @description: 商品设置页面相关业务:添加编辑商品类型、添加新商品类型分组
 * refreshTableFn:用来刷新table数据
 * UserAddGoodsTypeInit:页面初始化 这里会获取商品类型列表、获取商品类型分组列表、获取商品类型 相关初始化表单数据
 * UseAddGoodsTypeModule:添加编辑商品类型模块
 * UseAddGoodsGroupModule:添加新商品类型分组模块
 * 模块之间评级调用，
 
 */

//刷新Table数据
const refreshTableFn = (params):Promise<void> => {
  console.log(params);
  	console.log(state);
  state.statParams = { ...params, ...{ r: new Date().getTime() } };

  return Promise.resolve();
};

//数据获取的api
import { getGoodsTypeTableHeadApi, getGoodsTypeTableDataApi } from "@/api/modules/goodsArchive/set/goodsType.ts";
import { UserAddGoodsTypeInit, UseSearchModule, UseAddGoodsTypeModule, UseAddGoodsGroupModule } from "./index.ts";

//初始化商品设置模块
UserAddGoodsTypeInit(proxy, refreshTableFn);

//搜索模块

const { searchBarCompoent } = UseSearchModule();

//添加商品类型表单
const {
  addGoodsTypeFormComponent, //表单组件
  goodsTypeFormDataReactive, //表单数据 reactiev
  classIdOptions, //商品大类选项
  validateFormFn, //提交表单 返回Promise·
  drawerIsShow, //抽屉显示 boolean
  showFormDrawerFn, //显示抽屉fn
  hideFormDrawerFn, //关闭抽屉
  editFormDrawerFn, //编辑商品类型
  formDrawerOpenedFn, //打开后的回调
  formDrawerClosedFn //关闭抽屉后的回调
} = UseAddGoodsTypeModule(proxy);

//添加商品分组
const { addGoodsGroupComponent } = UseAddGoodsGroupModule();

  

</script>



<style scoped lang="scss">
</style>
 